<template>
    <div class="index-box">
        <div class="index-nav">
            <span v-for="(item,index) in index_nav_list" :key="index" @click="index_nav_lick($event,item.path)"  
            class="span_">{{item.name}}</span>
        </div>
        <div id="music-index-display">
            <RouterView>
            </RouterView>
        </div>
    </div>
</template>

<script setup>
import { onMounted,ref } from "vue";
import { useRouter, RouterView } from "vue-router";
let Router = useRouter()
// 这里使用了动态path
let index_nav_list = ref([
    { name: '首页', path: '/functions/music/index/index' },
    { name: '歌手', path: '/functions/music/index/singer' },
    { name: '排行', path: '/functions/music/index/rank' },
    { name: '歌单推荐', path: '/functions/music/index/playlist' },
    { name: '雷达', path: '/functions/music/index/radar' },
    { name: 'MV', path: '/functions/music/index/mv' }
])


async function deal_nav_color() { 
  document.querySelectorAll('.span_').forEach((item) => {
       item.setAttribute('style', `background-color: #fff;
       margin: 0 20px 0 20px;
       font - size: 16px;
        font - weight: 500;
        user - select: none;
        color:black`)
    })
}
// 导航
const index_nav_lick = async (e,path)=> {
      await deal_nav_color()
        e.target.style.color = '#19be6b';
        Router.push({path:`${path}`})
}






</script>

<style  scoped>
.index-nav{
    text-align: center;
    height: 25px;
}
.index-nav>span{
    background-color: #fff;
    margin:0 20px 0 20px;
    font-size: 16px;
    font-weight: 500;
    user-select: none;

}
.index-nav>span:hover{
   color:#19be6b;
}
</style>
